<template>
	<view>
		<drag-box
		:pos_x="pos_x" 
		:pos_y="pos_y" 
		:start_scale="start_scale" 
		:opa="opa" 
		:drag_able="drag_able"
		:stop_here="stop_here"
		@locationChanged="locationChanged"
		@scaleChanged="scaleChanged"
		>
			<view class="rank">
				<view class="rank-title">团员榜单</view>
				<view class="rank-content">
					<view class="rank-list">
						<view class="rank-number first-txt">1</view>
						<view class="rank-tx first"><image style="width: 100%; height: 100%;" src="../../static/tx.jpg"></image></view>
						<view class="rank-info">
							<view class="rank-name">甜辣妹妹</view>
							<view class="rank-deta">12354 贡献值</view>
						</view>
					</view>
					<view class="rank-list">
						<view class="rank-number second-txt">2</view>
						<view class="rank-tx second"><image style="width: 100%; height: 100%;" src="../../static/tx1.jpg"></image></view>
						<view class="rank-info">
							<view class="rank-name">演员懒洋洋懒洋洋</view>
							<view class="rank-deta">8436 贡献值</view>
						</view>
					</view>
					<view class="rank-list">
						<view class="rank-number thrid-txt">3</view>
						<view class="rank-tx thrid"><image style="width: 100%; height: 100%;" src="../../static/tx2.jpg"></image></view>
						<view class="rank-info">
							<view class="rank-name">鸢九</view>
							<view class="rank-deta">1254 贡献值</view>
						</view>
					</view>
					<view class="rank-list">
						<view class="rank-number">4</view>
						<view class="rank-tx"><image style="width: 100%; height: 100%;" src="../../static/tx3.jpg"></image></view>
						<view class="rank-info">
							<view class="rank-name">甜辣妹妹</view>
							<view class="rank-deta">76 贡献值</view>
						</view>
					</view>
				</view>
			</view>
		</drag-box>
	</view>
</template>

<script>
	
	import dragBox from '@/components/drag-box/drag-box.vue'
	
	export default {
		name:"rank",
		components: {
			dragBox
		},
		props: {
			pos_x: { type: Number, default: 0 },
			pos_y: { type: Number, default: 0 },
			start_scale: { type: Number, default: 1 },
			opa: { type: Number, default: 1 },
			drag_able: { type: Boolean, default: true},
			stop_here: { type: Boolean, default: false},
		},
		data() {
			return {
				
			};
		},
		methods: {
			locationChanged(location) {
				this.$emit('locationChanged', location)
			},
			scaleChanged(scale) {
				this.$emit('scaleChanged', scale)
			},
		}
	}
</script>

<style scoped>

.rank {
	background:rgb(0, 0, 0, 0.5);
	padding:10px;
	width: 220px;
	border-radius: 8px;
	text-align: center;
}

.rank-title {
	color: #fff;
	font-size: 18px;
	padding: 10px 0;
}

.rank-content {
	display: flex;
	flex-direction: column;
	color: #fff;
}

.rank-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 8px 0;
}

.rank-number {
	font-size: 16px;
	padding:0 15px;
}

.rank-tx {
	width: 40px;
	height: 40px;
	border-radius: 50px;
	overflow: hidden;
	margin: 0 5px;
	border: 2px solid #fff;
}

.rank-info {
	text-align: left;
	padding-left: 12px;
}

.rank-deta {
	 font-size: 14px;
	 font-weight: 300;
}

.first {
	border: 2px solid #f1ba79;
}

.first-txt {
	color: #f1ba79;
}

.second {
	border: 2px solid #8db9ea;
}

.second-txt {
	color: #8db9ea;
}

.thrid {
	border: 2px solid #f1ab91;
}

.thrid-txt {
	color: #f1ab91;
}

.rank-name {
	max-width: 12ch;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>